<template>
    <footer>
        <ul>
         <li>
           <router-link to="/films" active-class="zyx" tag="li"><i class="iconfont icon-home"></i>
        <span>电影</span>   
        </router-link>
         </li>
         <li>
              <router-link to="/cinemas" active-class="zyx" tag="li"><i class="iconfont icon-training"></i>
              <span>影院</span>
              </router-link>
           </li>
          <li>
           <router-link to="/center" active-class="zyx" tag="li"><i class="iconfont icon-account"></i>
           <span>我的</span>
           </router-link>
           </li>
        </ul>
    </footer>
</template>
<style lang="scss" scoped>

    footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2.7222rem;
        background-color: white;
        z-index: 10;
        ul{
            display: flex;
            li{
                flex: 1;
                display: flex;
                line-height:1.3889rem;
                text-align: center;
                flex-direction: column;
                i{
                    font-size: 20px;
                }
                span{
                    font-size: 16px;
                }
            }
        }
    }
    .zyx{
  color: red;
}
</style>